<template>
  <div class="local-image-upload">
    <!-- 图片显示区域 -->
    <div v-if="imageUrl" class="image-preview-wrapper">
      <img :src="imageUrl" class="image-preview" alt="商品图片" />
      <div class="image-actions">
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          size="mini"
          @click="handleRemove"
        ></el-button>
      </div>
    </div>
    
    <!-- 上传按钮 -->
    <el-upload
      v-else
      class="upload-wrapper"
      action="string"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-change="handleChange"
      accept="image/jpeg,image/png,image/gif"
    >
      <el-button type="primary" icon="el-icon-upload">上传图片</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'LocalImageUpload',
  props: {
    // 初始图片URL，用于回显
    value: {
      type: [String, File],
      default: ''
    },
    // 限制大小(MB)
    maxSize: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      imageUrl: '',  // 用于显示的图片URL
      imageFile: null, // 存储的图片文件对象
      morethansize: false
    }
  },
  watch: {
    // 监听value变化，用于外部更新图片
    value: {
      immediate: true,
      handler(newVal) {
        if (!newVal) {
          this.imageUrl = ''
          this.imageFile = null
          return
        }
        
        // 如果传入的是File对象
        if (newVal instanceof File) {
          this.imageFile = newVal
          this.createImageUrl(newVal)
          return
        }
        
        // 如果传入的是URL字符串
        if (typeof newVal === 'string') {
          this.imageUrl = newVal
        }
      }
    }
  },
  methods: {
    // 上传前的校验
    beforeUpload(file) {
      const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
      const isLtSize = file.size / 1024 / 1024 < this.maxSize
      
      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLtSize) {
        this.$message.error(`图片大小不能超过 ${this.maxSize}MB!`)
        this.morethansize = true
        return false
      }
      return true
    },
    
    // 文件选择变化时的处理
    handleChange(file) {

      
      const isLtSize = file.size / 1024 / 1024 < this.maxSize
      if (!isLtSize) {
        this.$message.error(`图片大小不能超过 ${this.maxSize}MB!`)
        this.morethansize = true
        return false
      }
      if (!file) return
      // 创建图片预览URL
      this.createImageUrl(file.raw)
      
      // 保存文件对象
      this.imageFile = file.raw
      
      // 通知父组件
      // this.$emit('input', file.raw) // 用于v-model
      this.$emit('change', file.raw) // 触发change事件
    },
    
    // 创建图片预览URL
    createImageUrl(file) {
      if (!file) return
      
      if (window.URL && window.URL.createObjectURL) {
        this.imageUrl = URL.createObjectURL(file)
      } else if (window.webkitURL) {
        // 兼容webkit内核浏览器
        this.imageUrl = window.webkitURL.createObjectURL(file)
      } else if (window.createObjectURL) {
        // 兼容旧版本
        this.imageUrl = window.createObjectURL(file)
      } else if (file instanceof Blob) {
        // 最后的方法，使用FileReader
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageUrl = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    
    // 删除图片
    handleRemove() {
      this.$confirm('确定要删除这张图片吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 释放URL对象
        if (this.imageUrl && this.imageUrl.startsWith('blob:')) {
          URL.revokeObjectURL(this.imageUrl)
        }
        
        this.imageUrl = ''
        this.imageFile = null
        
        // 通知父组件
        // this.$emit('input', null) // 清空v-model
        // this.$emit('change', null) // 触发change事件
        // this.$emit('remove') // 触发remove事件
        
        this.$message.success('图片已删除')
      }).catch(() => {
        // 用户取消删除
      })
    },
    
    // 获取当前图片文件
    getFile() {
      return this.imageFile
    },
    
    // 获取当前图片URL（如果是本地文件则是blob URL）
    getUrl() {
      return this.imageUrl
    }
  },
  
  // 组件销毁时释放URL对象
  beforeDestroy() {
    if (this.imageUrl && this.imageUrl.startsWith('blob:')) {
      URL.revokeObjectURL(this.imageUrl)
    }
  }
}
</script>

<style scoped>
.local-image-upload {
  display: inline-block;
}

.image-preview-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-actions {
  position: absolute;
  right: 10px;
  top: 10px;
}

.upload-wrapper {
  display: inline-block;
}

.el-upload__tip {
  margin-top: 7px;
  font-size: 12px;
  color: #606266;
}
</style>
